import {Tabs} from '@spectrum-web-components/tabs/src/Tabs.js';
// import {html} from "@spectrum-web-components/base/src/index.js";
// import {ifDefined} from "@spectrum-web-components/base/src/directives";
// import { css } from '@spectrum-web-components/base';
import {ifDefined} from 'lit/directives/if-defined.js';
import {css, html} from 'lit'

const noSelectionStyle = 'transform: translateX(0px) scaleX(0) scaleY(0)';

class ZwTabs extends Tabs {
  constructor() {
    super(...arguments);
    this.onClick = (event) => {
      if (this.disabled) {
        return;
      }
      // console.log(     event.target)
      if (event.target.hasAttribute('zw-tabs-prevent')) {
        return;
      }
      const target = event
        .composedPath()
        .find((el) => el.parentElement === this);
      if (!target || target.disabled) {
        return;
      }
      this.shouldAnimate = true;
      this.selectTarget(target);
    };

    this.updateSelectionIndicator = async () => {
      const selectedElement = this.tabs.find((el) => el.selected);
      if (!selectedElement) {
        this.selectionIndicatorStyle = noSelectionStyle;
        return;
      }
      await Promise.all([
        selectedElement.updateComplete,
        document.fonts ? document.fonts.ready : Promise.resolve(),
      ]);
      const tabBoundingClientRect = selectedElement.getBoundingClientRect();
      const parentBoundingClientRect = this.getBoundingClientRect();
      if (this.direction === 'horizontal') {
        const width = tabBoundingClientRect.width;
        const offset = this.dir === 'ltr'
          ? tabBoundingClientRect.left - parentBoundingClientRect.left
          : tabBoundingClientRect.right -
          parentBoundingClientRect.right;
        this.selectionIndicatorStyle = `transform: translateX(${offset}px) scaleX(${this.dir === 'ltr' ? width : -1 * width});`;
      }
      else {
        const height = tabBoundingClientRect.height;
        const offset = tabBoundingClientRect.top - parentBoundingClientRect.top;
        this.selectionIndicatorStyle = `transform: translateY(${offset}px) scaleY(${height});`;
      }
    };
  }
  static get styles() {
    return [...super.styles,
      css`
        :host([direction^=horizontal]) #listwrap::-webkit-scrollbar {
          z-index: 11;
          width: 6px;
          height: 6px;
        }
        :host([direction^=horizontal]) #listwrap::-webkit-scrollbar:horizontal {
          height: 6px;
        }
        :host([direction^=horizontal]) #listwrap::-webkit-scrollbar-thumb {
          border-radius: 5px;
          width: 6px;
          background: #b4bccc;
        }
        :host([direction^=horizontal]) #listwrap::-webkit-scrollbar-corner {
          background: #fff;
        }
        :host([direction^=horizontal]) #listwrap::-webkit-scrollbar-track {
          background: #fff;
        }
        :host([direction^=horizontal]) #listwrap::-webkit-scrollbar-track-piece {
          background: #fff;
          width: 6px;
        }
      `
    ];
  }
  render() {
    return html `
        <div id="listwrap" part="listwrap">
          <div
            aria-label=${ifDefined(this.label ? this.label : undefined)}
            @click=${this.onClick}
            @keydown=${this.onKeyDown}
            @sp-tab-contentchange=${this.updateSelectionIndicator}
            id="list"
            role="tablist"
            part="tablist"
        >
            <slot @slotchange=${this.onSlotChange}></slot>
            <div
                id="selection-indicator"
                part="selection-indicator"
                class=${ifDefined(this.shouldAnimate ? undefined : 'first-position')}
                style=${this.selectionIndicatorStyle}
                role="presentation"
            ></div>
        </div>
        </div>
        <slot name="tab-panel" @slotchange=${this.managePanels}></slot>
    `;
  }
}
customElements.define('zw-tabs', ZwTabs);
